<template>
  <view class="post-card">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <image class="user-avatar" :src="dynamicData.author?.avatar" mode="aspectFill"></image>
             <view class="user-details">
         <text class="username">{{ getDisplayName(dynamicData) }}</text>
         <text class="timestamp">{{ formatDate(dynamicData.createdata) }}</text>
       </view>
    </view>

    <!-- 帖子内容 -->
    <view class="post-content">
      <text class="post-text">{{ dynamicData.context || '暂无内容' }}</text>
    </view>
    
    <!-- 图片区域 -->
    <view v-if="dynamicData.img && dynamicData.img.length > 0" class="images-container">
      <view class="images-grid">
        <image 
          v-for="(imageUrl, index) in dynamicData.img" 
          :key="index"
          :src="imageUrl"
          class="post-image"
          mode="aspectFill"
          @click="previewImage(imageUrl, dynamicData.img)"
        />
      </view>
    </view>
    
    <!-- 标签区域 -->
    <tag-component 
      :tags="dynamicData.topic || dynamicData.tag || []" 
      default-tag="默认标签"
    />
    
    <!-- 互动区域 -->
    <view class="post-footer">
      <view class="left-section">
        <view class="interaction-stats">
          <view class="stat-item">
            <text class="stat-icon">👁</text>
            <text class="stat-number">{{ dynamicData.views || 0 }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-icon">💬</text>
            <text class="stat-number">{{ commentsCount }}</text>
          </view>
          <view class="stat-item" @click="handleLikeClick">
            <text class="stat-icon" :class="{ 'liked': isLiked }">❤</text>
            <text class="stat-number">{{ likeCount }}</text>
          </view>
        </view>
      </view>
      <view class="right-section">
        <button class="tip-button">¥ 打赏</button>
      </view>
    </view>
  </view>
</template>

<script>
import TagComponent from './tag.vue';

export default {
  name: 'DynamicDetailsUserContext',
  components: {
    TagComponent
  },
  props: {
    // 动态数据
    dynamicData: {
      type: Object,
      default: () => ({})
    },
    // 评论数量
    commentsCount: {
      type: Number,
      default: 0
    },
    // 点赞数量
    likeCount: {
      type: Number,
      default: 0
    },
    // 是否已点赞
    isLiked: {
      type: Boolean,
      default: false
    }
  },
  emits: ['like-click'],
  setup(props, { emit }) {
    // 格式化日期
    const formatDate = (date) => {
      if (!date) return new Date().toLocaleString();
      if (typeof date === 'string') {
        return new Date(date).toLocaleString();
      }
      if (date instanceof Date) {
        return date.toLocaleString();
      }
      return new Date().toLocaleString();
    };

    // 处理点赞点击
    const handleLikeClick = () => {
      emit('like-click');
    };

    // 预览图片
    const previewImage = (currentImage, images) => {
      uni.previewImage({
        current: currentImage,
        urls: images
      });
    };

    // 获取显示的用户名
    const getDisplayName = (dynamicData) => {
      // 如果 anonymity 为 true，显示匿名用户
      if (dynamicData.anonymity === true) {
        return '匿名用户';
      }
      
      // 如果 anonymity 为 false 或未设置，显示真实用户名
      return dynamicData.author?.name || '未知用户';
    };

    return {
      formatDate,
      handleLikeClick,
      previewImage,
      getDisplayName
    };
  }
}
</script>

<style lang="scss" scoped>
/* 帖子卡片样式 */
.post-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.timestamp {
  font-size: 12px;
  color: #999;
  display: block;
}

/* 帖子内容 */
.post-content {
  margin-bottom: 15px;
}

.post-text {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  display: block;
}

/* 图片区域样式 */
.images-container {
  margin-bottom: 15px;
}

.images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
  border: 1rpx solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.post-image:active {
  transform: scale(0.95);
}

/* 标签区域样式已移至tag组件中 */

/* 帖子底部区域 */
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-section {
  display: flex;
  align-items: center;
}

.interaction-stats {
  display: flex;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.stat-icon {
  font-size: 14px;
  margin-right: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.stat-icon.liked {
  color: #ff4757;
  transform: scale(1.2);
  animation: likeAnimation 0.3s ease;
}

@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.2);
  }
}

.stat-number {
  font-size: 14px;
  color: #666;
}

.tip-button {
  background-color: #ff4757;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
</style>